<template>
  <a-config-provider :locale="lang">
    <div>
      {{ count }}
      <SvgIcon name="add-fill" :size="24" color="#3b82f6" :rotate="0" />
      <a-button v-debounce:click="addCount">{{ t("ok") }}</a-button>
      <a-dropdown placement="bottomLeft">
        <div>
          <span @click.prevent>{{ locale === "zh-cn" ? t("chinese") : t("english") }}</span>
          <GlobalOutlined />
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a href="javascript:;" @click="changeLang('zh-cn')">{{ t("chinese") }}</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="changeLang('en-us')">{{ t("english") }}</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <RouterView />
    </div>
  </a-config-provider>
</template>

<script setup lang="ts">
import { useUser } from "./store";
import dayjs from "dayjs";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import enUS from "ant-design-vue/es/locale/zh_CN";
import "dayjs/locale/zh-cn.js";
import "dayjs/locale/en.js";
import { useI18n } from "vue-i18n";
import { changeLanguage } from "@/lang/index";
import { GlobalOutlined } from "@ant-design/icons-vue";
import SvgIcon from "@/components/svgIcon/index.vue";

dayjs.locale("zh-cn");

const { t, locale } = useI18n();
const { count, addCount } = toRefs(useUser());
const lang = ref(zhCN);

watch(
  () => locale.value,
  val => {
    if (val === "en") {
      dayjs.locale("en-us");
      lang.value = enUS;
    } else {
      dayjs.locale("zh-cn");
      lang.value = zhCN;
    }
  },
  { deep: true }
);

async function changeLang(language: string) {
  await changeLanguage(language);
  locale.value = language;
}
</script>

<style lang="less" scoped></style>
